<template>
  <div class="detal">
     <h2 class="header">
         <div class="out" @click="out">
             <van-icon name="arrow-left" class="icon"/>
         </div>
         
         <span>{{title}}</span></h2>
       <div class="commont" v-for="(item, index) in content" :key="index">
           <div class="img">
               <img :src="item.img" alt="">
           </div>
           <div class="msg">
               <span class="price">￥{{item.price}}</span>
               <span class="oldprice">￥{{item.cur_price}}</span>
               <span class="des">{{item.des}}</span>
           </div>
        </div> 
  </div>
</template>

<script>
import { DetailList } from "@/api/home";
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);
export default {
    name:"dedal",
    data() {
        return {
            title:"",
            content:[],
            pid:""
        }
    },
   mounted() {
       document.title = this.$route.meta.title;
        this.pid=this.$route.params.id
        console.log(this.pid);
       this.title=document.title;
       this.getdetail(this.pid)
   },
   methods: {
      async getdetail(pid) {
            const res = await DetailList(pid);
            this.content = res.data.data;
            console.log(this.content);
    },
    out(){
        this.$router.go(-1)
    }
   },
}
</script>

<style lang="scss">
    .detal{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction:column;
        .header{
            width: 100%;
            height: .9rem;
            background: #fff;
            display: flex;
           .out{
               width: 15%;
               height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .icon{
                     font-size: 25px;
                    font-weight: 700;
                   
                }
           }
            span{
                display: block;
                width: 85%;
                height: 100%;
                 display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .commont{
            flex: 1;
            position: relative;
            .img{
                width: 100%;
                height: 60%;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .msg{
                position: absolute;
                top: 337px;
                // position: relative;
                width: 100%;
                height: 1.1rem;
                background: #FD4C26;
                color: white;
                border-radius: 20px 20px 0px 0px ;
                .price{
                    margin-left: 10px;
                    font-size: 20px;
                }
                .oldprice{
                    margin-left: 5px;
                    text-decoration:line-through; 
                }
                .des{
                    position: relative;
                    bottom: -22px;
                    left: -70px;
                }
            }
        }
    }
</style>